<template>
  <div style="padding: 0 15px;" @click="toggleClick">
    <svg
      :class="{'is-active':isActive}"
      class="hamburger"
      viewBox="0 0 1024 1024"
      xmlns="http://www.w3.org/2000/svg"
      width="64"
      height="64"
    >
      <path d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z" :fill="menuColor" />
      <!--      <path d="M925.77792 776.71936a152.1152 152.1152 0 0 0-15.45728-37.46816l29.50656-44.416-0.1536-0.0768-41.91744-41.91232-0.0768-0.0768-44.416 29.50656a153.37472 153.37472 0 0 0-37.30944-15.45728l-10.61888-52.21888h-59.39712l-10.61888 52.14208a153.2928 153.2928 0 0 0-37.31456 15.45728l-44.416-29.42976-42.07104 42.07104 29.50144 44.416a149.43744 149.43744 0 0 0-15.52896 37.46816l-52.21888 10.61888v59.39712l52.21888 10.61888a154.8288 154.8288 0 0 0 15.45216 37.46816l-29.50144 44.416 42.07104 42.07104 44.4928-29.50144a153.73312 153.73312 0 0 0 37.31456 15.45216l10.61888 52.21888h59.39712l10.61888-52.21888a152.36608 152.36608 0 0 0 37.30944-15.45216l44.416 29.50144 0.0768-0.0768 41.91744-41.91232 0.0768-0.0768-29.50656-44.416a152.32 152.32 0 0 0 15.45728-37.46816L977.92 846.73536v-59.39712l-52.14208-10.61888z m-150.02624 110.53056c-38.84032-0.04608-70.29248-31.5648-70.25152-70.41024 0.04608-38.84032 31.5648-70.29248 70.40512-70.25152 38.84544 0.04096 70.2976 31.5648 70.25664 70.41024-0.04096 38.84032-31.5648 70.29248-70.41024 70.25152z m0 0" fill="" p-id="2517" /><path d="M716.16512 593.7664c11.29984-8.37632 71.5776-118.07744 71.5776-118.07744h-179.92704c32.35328-46.5408 53.92384-107.84768 53.92384-175.95904v-15.89248c69.81632-12.48768 115.22048-32.35328 115.22048-52.21888 0-21.56544-50.51392-41.43616-127.70816-53.92384-3.4048-18.16576-55.62368-165.1712-116.92032-165.1712-27.24352 0-48.8192 14.18752-63.00672 35.75808 0 10.78784-10.78272 21.56544-24.97536 21.56544-12.48768 0-23.2704-9.08288-24.97024-19.8656-12.48768-21.56544-35.7632-38.03136-63.00672-38.03136-59.5968 0-115.2256 135.08608-127.70816 169.14432-66.4064 12.48768-109.54752 30.64832-109.54752 52.21888 0 21.56544 44.84096 39.72608 115.2256 52.21888v15.89248c0 68.11136 19.8656 129.41312 53.92384 175.95904H108.32896l77.19424 126.00832c-57.32864 0-132.82304 78.8992-132.82304 147.57376l1.70496 206.60736c0 34.05824 26.6752 61.30176 61.30176 61.30176 0 0 488.87808 0.59392 506.95168 0C487.68 887.46496 535.89504 660.48 716.16512 593.7664z m-316.66176 374.59968h-28.94848l-53.92384-397.32224 112.95744 98.75968-30.08512 298.56256z m123.74016 0h-28.94848l-30.65344-298.56256 113.52064-100.46464-53.91872 399.0272z m68.11136-627.20512v12.48768h-14.18752s-9.08288 77.19424-57.32864 77.19424c-48.81408 0-57.89184-77.19424-57.89184-77.19424h-32.34816c-7.37792 63.0016-39.7312 77.19424-57.32864 77.19424-43.136 0-55.6288-57.32864-57.32864-77.19424H300.1856v-24.97536h107.84256v12.48768h72.0896v-12.48768h107.84256v12.48768h3.39456z m0 0" />-->
      <!--      <path d="M512 1024C229.7 1024 0 794.3 0 512S229.7 0 512 0s512 229.7 512 512-229.7 512-512 512z m0-952.6C269.1 71.4 71.4 269 71.4 512S269 952.6 512 952.6 952.6 755 952.6 512 754.9 71.4 512 71.4z" fill="#27D0D8" p-id="3318"></path><path d="M774 381H250c-19.7 0-35.7-16-35.7-35.7 0-19.7 16-35.7 35.7-35.7h523.9c19.7 0 35.7 16 35.7 35.7 0.1 19.7-15.9 35.7-35.6 35.7zM774 547.7H250c-19.7 0-35.7-16-35.7-35.7s16-35.7 35.7-35.7h523.9c19.7 0 35.7 16 35.7 35.7s-15.9 35.7-35.6 35.7zM774 714.4H250c-19.7 0-35.7-16-35.7-35.7 0-19.7 16-35.7 35.7-35.7h523.9c19.7 0 35.7 16 35.7 35.7 0.1 19.7-15.9 35.7-35.6 35.7z"></path>-->
      <!--      <path d="M0.837818 75.218317c0 19.642164 8.098902 39.191237 21.969435 53.06177 13.963624 13.963624 33.512697 22.062525 53.247951 22.062525a76.055204 76.055204 0 0 0 53.06177-21.969434c13.963624-13.963624 22.062525-33.512697 22.062526-53.154861A76.055204 76.055204 0 0 0 129.303156 21.970365 76.055204 76.055204 0 0 0 76.055204 0.000931a76.055204 76.055204 0 0 0-53.247951 21.969434A76.706839 76.706839 0 0 0 0.837818 75.218317M0.837818 476.160498c0 19.642164 8.005811 39.377419 21.969435 53.247952 13.963624 13.963624 33.419606 21.969435 53.247951 21.969434a76.241385 76.241385 0 0 0 53.154861-21.969434 75.962113 75.962113 0 0 0 21.969435-53.247952 76.241385 76.241385 0 0 0-21.969435-53.154861 75.962113 75.962113 0 0 0-53.154861-21.969434 76.241385 76.241385 0 0 0-53.247951 21.969434 75.962113 75.962113 0 0 0-21.969435 53.154861M0.837818 877.19577c0 19.642164 8.005811 39.284328 21.969435 53.247951 13.963624 13.963624 33.419606 21.969435 53.247951 21.969435a76.241385 76.241385 0 0 0 53.154861-21.969435 75.962113 75.962113 0 0 0 21.969435-53.247951 76.241385 76.241385 0 0 0-21.969435-53.247952 75.962113 75.962113 0 0 0-53.154861-21.969434 76.241385 76.241385 0 0 0-53.247951 21.969434 76.520658 76.520658 0 0 0-21.969435 53.247952M1304.109361 75.218317c0 41.518508-32.395607 75.124295-72.331571 75.124295H373.945843c-40.029055 0-72.331571-33.512697-72.331571-75.124295C301.521181 33.513628 333.916788 0.000931 373.945843 0.000931h857.831947c40.029055 0 72.331571 33.605788 72.331571 75.217386M1231.77779 551.377884H373.945843c-40.029055 0-72.331571-33.605788-72.331571-75.217386 0-41.518508 32.302516-75.124295 72.331571-75.124295h857.831947c40.029055-0.186182 72.331571 33.512697 72.331571 75.124295 0 41.425417-32.395607 75.217386-72.331571 75.217386zM1304.109361 877.102679c0 41.611599-32.395607 75.310477-72.331571 75.310477H373.945843c-40.029055 0-72.331571-33.698878-72.331571-75.310477 0-41.425417 32.302516-75.124295 72.331571-75.124295h857.831947c40.029055-0.093091 72.331571 33.698878 72.331571 75.124295" fill="#1afa29"></path>-->
    </svg>
  </div>
</template>

<script>
export default {
  name: 'Hamburger',
  props: {
    isActive: {
      type: Boolean,
      default: false
    },
    menuColor: {
      type: String,
      default: '#000000'
    }
  },
  methods: {
    toggleClick() {
      this.$emit('toggleClick')
    }
  }
}
</script>

<style scoped>
.hamburger {
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
}

.hamburger.is-active {
  transform: rotate(180deg);
}
</style>
